<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>
	<script>
		window.onload=function(){
			// 点击登录按钮 获取token 存储到会话 
		// 携带token去更新一条数据
		function login1() {
			// 登录请求 token post 后台需要数据 json
			// 1.创建一个实例对象
			var xhr = new XMLHttpRequest();
			// 2.打开一个连接
			// 需要传递json 
			var obj={
				username:"admin1",
				password:123321
			};
			xhr.open('post', 'http://121.199.0.35:8888/user/login');
			// 设置请求头
			xhr.setRequestHeader('Content-Type','application/json');
			// 3.发送请求
			// 二、给后端发送json数据
			xhr.send(JSON.stringify(obj));
			// 4.接收响应
			xhr.onreadystatechange = function () {
				if (xhr.readyState === 4 && xhr.status === 200) {
					// console.log(xhr.responseText);//json格式数据 
					var res=JSON.parse(xhr.responseText);
					console.log(res);//{data:{token:""}}
					// setItem 会话存储方法 参数:属性名 属性值
					sessionStorage.setItem('token',res.data.token)
				}
			}
		}
		// 更新数据方法
		function saveOrUpdate() {
			// 登录请求 token post 后台需要数据 json
			// 1.创建一个实例对象
			var xhr = new XMLHttpRequest();
			// 2.打开一个连接
			// 需要传递json 
			var obj={
				name:"test-web2203",
				description:'跪求网络号'
			};
			// 将数据转成表单格式
			
			xhr.open('post', 'http://121.199.0.35:8888/category/saveOrUpdate');
			// 设置请求头
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			// sessionStorage.getItem('token') 获取会话存储 geiItem 参数:属性名
			xhr.setRequestHeader('Authorization',sessionStorage.getItem('token'));
			// 3.发送请求
			// 二、给后端发送表单格式数据
			xhr.send(Qs.stringify(obj));
			// 4.接收响应
			xhr.onreadystatechange = function () {
				if (xhr.readyState === 4 && xhr.status === 200) {
					console.log(xhr.responseText);//json格式数据 
				}
			}
		}
		// 获取登录按钮和更新按钮
		var login=document.getElementById('login');
		var save=document.getElementById('save');
		//绑定事件
		login.onclick=function(){
			login1()
		}
		// post两种数据格式 

		// 绑定更新按钮事件
		save.onclick=function(){
			saveOrUpdate()
		}
	}
	</script>
</head>

<body>
	<button id="login">登录</button>
	<button id="save">更新资讯信息</button>
</body>

</html>